const path = require('path')

const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'production', // 生产环境模式
  output: {
    filename: '[name]-[contenthash:8].bundle.js',
    path: path.join(__dirname, 'dist'), // path必须为绝对路径
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          // loader的作用顺序是从后往前依次执行的
          MiniCssExtractPlugin.loader, // 当css文件超过150KB时可以使用这种方式提取到单个文件
          'css-loader', // 加载.css文件,处理 import / require（） @import / url 引入的内容。
          'less-loader', // 将less文件转换为css文件
        ],
      },
    ],
  },
  plugins: [
    // 用于自动清除输出目录
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public', to: '' }
      ]
    }),
    new MiniCssExtractPlugin({
      filename: '[name]-[contenthash:8].bundle.css',
    })
  ]
})
